<template>
	<!-- 订单商品栏 -->
	<view>
		<view class="outer-box" style="display: flex;height: 150rpx;width: auto;" v-for="(item,index) in goodsList"
			:key="index">
			<view>
				<image :src="item.goods_banner_imgs[0].url" style="height: 150rpx;width: 150rpx;border-radius: 18rpx;"
					mode="aspectFill">
				</image>
			</view>
			<view style="width: 15rpx;">
			</view>
			<view>
				<view style="height: 78rpx;font-size: 30rpx;">
					<text>{{item.name}}</text>
				</view>
				<view class="price-box">
					<text class="yuan-font">回收价格￥</text>
					<text class="price-font">
						{{convert(item.goods_price).integer}}.
					</text>
					<text class="price-font">
						{{convert(item.goods_price).point}}
					</text>
					<!-- <text class="x1">x1</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ['goodsList'],
		methods: {
			convert(money) {
				return {
					integer: Math.floor(money / 100),
					point: money % 100
				}
			},
		}
	}
</script>

<style>
	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}

	.yuan-font {
		color: #FF5000;
		font-size: 32rpx;
	}

	.price-box {
		height: 72rpx;
		position: absolute;
		right: 50rpx;
	}

	.price-font {
		font-size: 28rpx;
		color: #FF5000;
		font-family: Verdana;
	}

	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}

	.x1 {
		font-size: 2rpx;
		margin: 10rpx;
		width: 48rpx;
		height: 48rpx;
		border: #8a8a8a 1px solid;
		border-radius: 18rpx;
		display: inline-block;
		line-height: 50rpx;
		text-align: center;
	}

	.header {
		width: 750rpx;
		height: 105rpx;
		background-color: #f9f9fc;
		line-height: 105rpx;
		text-align: center;
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 10rpx;
	}
</style>